<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <header></header>

  <!-- 路由对应的目标组件的承载容器 -->
  <main>
    <!-- 添加组件的切换动画 -->
      <router-view v-slot="{ Component }">
        <!-- 动画过渡模式 先切走 再切入 -->
        <transition name="slide-fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
  </main>

  <nav class="tab-wrapper" v-show="!$route.meta.hideTabBar">
    <RouterLink active-class="active" class="tab" to="/movie">
      <van-icon name="wap-home-o" size="22px" />
      <p>电影</p>
    </RouterLink>
    <RouterLink active-class="active" class="tab" to="/cinema">
      <van-icon name="shop-o" size="22px" />
      <p>影院</p>
    </RouterLink>
    <RouterLink active-class="active" class="tab" to="/soul">
      <van-icon name="label-o" size="22px" />
      <p>资讯</p>
    </RouterLink>
    <RouterLink active-class="active" class="tab" to="/user">
      <van-icon name="user-o" size="22px" />
      <p>我的</p>
    </RouterLink>
      <RouterLink active-class="active" class="tab" to="/three">
      <van-icon name="user-o" size="22px" />
      <p>soul</p>
    </RouterLink>
  </nav>
</template>

<style lang="scss" scoped>
main {
  height: calc(100vh - 50px);
  overflow: scroll;
}
.tab-wrapper {
  position: fixed;
  width: 100%;
  bottom: 0;
  // border-top: 1px solid #000;
  display: flex;
  background: #fff;
  .tab {
    height: 49px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    text-align: center;
    text-decoration: none;
    color: #888;
    p {
      font-size: 12px;
    }
  }

  .tab.active {
    color: orange;
  }
}
.listContent {
  width: 100%;
  height: 92%;
  padding-bottom: 20%;
}
/* 定义组件切换动画 */
//组件入场动画 + 组件离场动画
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.5s ease;
}

//组件进入之前 + 组件离去以后的状态 
.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>
